<template>
  <div id="classify">
      <div class="container">
        <!--head-->
        <Header :classify_id="i"></Header>
        <!--list-head-->
        <section class="sen-container" style="margin-top:80px">
          <div class="list-head">
<!--            <p class="list-name" @click="list=allArr" style="cursor: pointer">所有商品</p>-->
            <p></p>
            <div class="list-nav">
              <div class="nav-sel">
                <p @click="list=product(list)">新品</p>
                <p @click="salesSort(list)">销量 <span>
                  <i class="triangle-up"  ref="salesUp"></i>
                  <i class="triangle-down"  ref="salesDown"></i>
                </span></p>
                <p @click="priceSort(list)">价格 <span>
                  <i class="triangle-up" ref="priceUp"></i>
                  <i class="triangle-down" ref="priceDown"></i>
                </span></p>
              </div>
              <div class="price-search">
                <input type="text" placeholder="最低价" v-model.number="priceMin" @change="keydown">
                <span class="line">-</span>
                <input type="text" placeholder="最高价" v-model.number="priceMax" @change="keydown">
                <span class="price-btn" @click="list=determine(priceMin,priceMax,tabArr)">确定</span>
              </div>
            </div>
          </div>
          <div class="list-classify">
        <!--分类侧边栏-->
            <div class="classify-lf">
              <dl v-for="(val,index) in tabFor" :key="index">
                <dt v-html="val.name" :class="val.isClass?'color':''" @click="list=val.sum===0?allSwitch(allArr):val.sum===2?product(allArr,true):tabSwitch(val.sum,allArr);val.isClass=true"></dt>
                <dd v-for="(item,indexs) in val.list" :key="indexs" :class="item.isClass?'color':''" @click="list=tabSwitch(item.sum,allArr);item.isClass=true">{{item.name}}</dd>
              </dl>
            </div>
        <!--分类内容-->
            <div class="classify-rt"  v-if="list.length!=0">
              <ul class="goods-list">
                <li class="goods-item hover" style="width: 317px;" v-for="val in list" :key="val.id">
                  <router-link :to="{name:'Product',query:{id:val.id}}">
                    <!--免息-->
                    <p class="goods-free" v-if="val.isFree==1">
                      {{ val.free }}
                    </p>
                    <!--图片-->
                    <div class="goods-img">
                      <div class="el-image">
                        <img  v-lazyload="val.mainimage" alt="" width="317">
                      </div>
                    </div>
                    <!--字段-->
                    <div class="goods-info">
                      <p class="title">
                        <span class="new" v-if="val.isNew==1">新品</span>
                        {{ val.title }}
                      </p>
                      <p class="price">
                        <label class="unit">¥</label>
                        {{ val.price }}
                        <span class="price-line" v-if="val.isPrice">￥{{val.priceLine}}</span>
                        <span class="sales-volume">销量:{{val.salesVolume}}</span>
                      </p>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
            <div  v-else>
              <NotFound></NotFound>
            </div>
          </div>
        </section>
        <!--footer-->
        <Footer></Footer>
      </div>
    <Top></Top>
  </div>

</template>

<script setup>
// localStorage.removeItem("history")
// 引入公共部分
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import Top from "../components/Top.vue";
import NotFound from "./components/classify/NotFound.vue";
//引入vuex
import {useStore} from "vuex"
import {useRoute} from 'vue-router';
const store = useStore();
const router = useRoute();

import {getCurrentInstance, onMounted,computed, reactive, ref, nextTick, watch} from "vue";

const { proxy } = getCurrentInstance();//解析获取的数据
//teb栏遍历
let tabFor=ref([
      {
    name:"所有商品",
    isClass:false,
    sum:0,
    list:[
    ]
  },
      {
        name:"无线系列",
        isClass:false,
        sum:1,
        list:[
          {
            name:"真无线",
            isClass:false,
            sum:11,
          },
          {
            name:"颈挂入耳",
            isClass:false,
            sum:12,
          },
          {
            name:"降噪头戴",
            isClass:false,
            sum:13,
          },
        ]
      },
      {
        name:"新品首发",
        isClass:false,
        sum:2,
        list:[
        ]
      },
      {
        name:"音乐娱乐",
        isClass:false,
        sum:[11,13],
        list:[
          {
            name:"旅行降噪",
            isClass:false,
            sum:[11,13],
          },
        ]
      },
      {
        name:"游戏系列",
        isClass:false,
        sum:4,
        list:[
          {
            name:"游戏耳机",
            isClass:false,
            sum:41,
          },

        ]
      },
      {
        name:"通讯系列",
        isClass:false,
        sum:5,
        list:[
          {
            name:"蓝牙耳机",
            isClass:false,
            sum:[1,2,3],
          },
          {
            name:"监听系列",
            isClass:false,
            sum:51,
          },
          {
            name:"有线耳机",
            isClass:false,
            sum:52,
          },
          {
            name:"PC耳机",
            isClass:false,
            sum:53,
          },
        ]
      },
      {
        name:"麦克风",
        isClass:false,
        sum:6,
        list:[
          {
            name:"人声话筒",
            isClass:false,
            sum:61,
          },
          {
            name:"乐器话筒",
            isClass:false,
            sum:62,
          },
          {
            name:"摄像话筒",
            isClass:false,
            sum:63,
          },
          {
            name:"会议全向麦",
            isClass:false,
            sum:64,
          },
        ]
      },
      {
        name:"耳机配件",
        isClass:false,
        sum:7,
        list:[
          {
            name:"头棉",
            isClass:false,
            sum:71,
          },
          {
            name:"耳垫",
            isClass:false,
            sum:72,
          },
          {
            name:"耳机盒",
            isClass:false,
            sum:73,
          },
          {
            name:"耳机线",
            isClass:false,
            sum:74,
          },
          {
            name:"耳机单元",
            isClass:false,
            sum:75,
          },
        ]
      },
    ])
//当前页面显示的数据数组
let list = ref([]);

let sear = computed(() => store.state.search);
watch(sear,(newV,oldV)=>{
  if (newV!=''&&isNaN(newV)){
    list.value = newV;
  }else if(typeof newV=="number"){
    list.value = [];
  }
})

// 请求数据库页面数据
let tabArr=[];
let allArr=[];
let i = ref(0);
onMounted(()=>{
  proxy.$get("/api/data/classify").then((data)=>{
    list.value = data;
    nextTick(()=>{
      //在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
      tabArr.push(...list.value)
      allArr.push(...list.value);
      let tabSwitch=(index,list)=>{
        let arr = [];
        if (index>=0){
          index=parseFloat(index);
        }
        if (isNaN(index)&&index!==undefined){
          //判断是不是数字
          for (let i=0;i<index.length;i++){
            if (index[i]<10){
              //判断分类的id加入数组
              for(let j = 0;j<list.length;j++) {
                if (list[j].classify_id > index[i] * 10 && list[j].classify_id < index[i] * 10 + 10) {
                  arr.push(list[j])
                }
              }
            }else {
              for(let j = 0;j<list.length;j++) {
                if (list[j].classify_id === index[i]) {
                  arr.push(list[j])
                }
              }
            }
          }
        }else {
          if (index<10){
            //index<10 是dt
            if (index==2){
              // 首页点击新品
              for(let i = 0;i<list.length;i++) {
                if (list[i].isNew==1) {
                  arr.push(list[i])
                }
              }
            }else {
              for(let i = 0;i<list.length;i++) {
                if (list[i].classify_id > index * 10 && list[i].classify_id < index * 10 + 10) {
                  arr.push(list[i])
                }
              }
            }
          }else {
            for(let i = 0;i<list.length;i++) {
              if (list[i].classify_id === index) {
                arr.push(list[i])
              }
            }
          }
        }
        tabArr=[];
        tabArr.push(...arr);
        for (let i=0;i<tabFor.value.length;i++){
          //高亮排他
          tabFor.value[i].isClass=false;
          for (let j=0;j<tabFor.value[i].list.length;j++){
            tabFor.value[i].list[j].isClass=false;
          }
        }
        window.scrollTo(0, 0);//点击 页面返回顶部
        return arr
      }
      let fn=(newV)=>{
        if (newV.query.classify_id==0){
          list.value=allSwitch(allArr);//遍历数据
        }else {
          list.value=tabSwitch(newV.query.classify_id,allArr);//如果classify_id不等于0触发tabSwitch方法
        }
        if (newV.query.classify_id<10){//比对dt 让dt高亮
          for (let i=0;i<tabFor.value.length;i++){
            if (newV.query.classify_id==tabFor.value[i].sum){//’tab栏遍历‘中的数与后端发送的分类id匹配
              tabFor.value[i].isClass=true;
            }
          }
        }else {
          for (let i=0;i<tabFor.value.length;i++){//比对dd
            for (let j=0;j<tabFor.value[i].list.length;j++){
              if (tabFor.value[i].list[j].sum==newV.query.classify_id){
                tabFor.value[i].list[j].isClass=true;//如果匹配成功就高亮
              }
            }
          }
        }
      }
      fn(router);
      if (sear.value!=""){
        list.value = [...computed(() => store.state.search).value];
      }else if(sear.value=="0"){
        list.value = [];
      }
    })
  })
})
//监听teb栏与导航条的联动
watch(router,(newV)=>{
  if (newV.query.classify_id==0){
    list.value=allSwitch(allArr);//遍历数据
  }else {
    list.value=tabSwitch(newV.query.classify_id,allArr);//如果classify_id不等于0触发tabSwitch方法
  }
  if (newV.query.classify_id<10){//比对dt 让dt高亮
    for (let i=0;i<tabFor.value.length;i++){
      if (newV.query.classify_id==tabFor.value[i].sum){//’tab栏遍历‘中的数与后端发送的分类id匹配
        tabFor.value[i].isClass=true;
      }
    }
  }else {
    for (let i=0;i<tabFor.value.length;i++){//比对dd
      for (let j=0;j<tabFor.value[i].list.length;j++){
        if (tabFor.value[i].list[j].sum==newV.query.classify_id){
          tabFor.value[i].list[j].isClass=true;//如果匹配成功就高亮
        }
      }
    }
  }
})
//新品筛选
let product =(index,foo)=>{
  i.value=index;
  // console.log(index)
  let arr = [];
  for(let i = 0;i<index.length;i++){
    //筛选是否有新品
    if (index[i].isNew===1){
      arr.push(index[i])
    }
  }
  //新品高亮判断
  if (foo===true){
    for (let i=0;i<tabFor.value.length;i++){
      tabFor.value[i].isClass=false;
      for (let j=0;j<tabFor.value[i].list.length;j++){
        tabFor.value[i].list[j].isClass=false;
      }
    }
    window.scrollTo(0, 0);
  }
  return arr
}
//开关
let salesinfo = ref(true);
let priceinfo = ref(true);
//倒三角初始化
let salesUp = ref(null);
let salesDown = ref(null);
let priceUp = ref(null);
let priceDown = ref(null);
//销量
let salesSort =(list)=>{
  if (salesinfo.value){
    function sortData1(a, b) {
      return b.salesVolume - a.salesVolume;
    }
    list.sort(sortData1);
    salesinfo.value = false;
    salesUp.value.className='triangle-up active1';
    salesDown.value.className='triangle-down';
  }else {
    function sortData2(a, b) {
      return a.salesVolume - b.salesVolume;
    }
    list.sort(sortData2);
    salesinfo.value = true;
    salesUp.value.className='triangle-up';
    salesDown.value.className='triangle-down active2';
  }
}
//价格
let priceSort =(list)=>{
  if (priceinfo.value){
    function sortData1(a, b) {
      return  b.price - a.price;
    }
    list.sort(sortData1);
    priceinfo.value = false;
    priceUp.value.className='triangle-up active1';
    priceDown.value.className='triangle-down';
  }else {
    function sortData2(a, b) {
      return  a.price - b.price;
    }
    list.sort(sortData2);
    priceinfo.value = true;
    priceUp.value.className='triangle-up';
    priceDown.value.className='triangle-down  active2';
  }
}
//价格区间
let priceMin=ref('');
let priceMax=ref('');
let keydown=(e)=>{
  e.target.value=e.target.value.replace(/[^\d]/g,"");
  if (e.target.placeholder=="最高价"){
    priceMax.value=e.target.value.replace(/[^\d]/g,"");
  }else {
    priceMin.value=e.target.value.replace(/[^\d]/g,"");
  }
}
//确定
let determine=(Min,Max,list)=>{
  let arr = [];
  if (Min>Max){
    let sum=Min;
    Min=Max;
    Max=sum;
  }
  for(let i = 0;i<list.length;i++){
    if (list[i].price>Min&&list[i].price<Max){
      arr.push(list[i])
    }
  }
  return arr
}

//tab栏切换
let tabSwitch=(index,list)=>{
  //点击分类初始化状态
  salesUp.value.className = 'triangle-up';
  salesDown.value.className = 'triangle-down';
  priceUp.value.className = 'triangle-up';
  priceDown.value.className ='triangle-down';
  salesinfo.value = true;
  priceinfo.value = true;
  priceMin.value = null;
  priceMax.value = null;
  list=list.sort((a,b)=>{
    return a.id-b.id;
  })
  i.value = index;
  let arr = [];
  if (index>=0){
    index=parseFloat(index);
  }
  if (isNaN(index)&&index!==undefined){
    //判断是不是数字
    for (let i=0;i<index.length;i++){
      if (index[i]<10){
        //判断分类的id加入数组
        for(let j = 0;j<list.length;j++) {
          if (list[j].classify_id > index[i] * 10 && list[j].classify_id < index[i] * 10 + 10) {
            arr.push(list[j])
          }
        }
      }else {
        for(let j = 0;j<list.length;j++) {
          if (list[j].classify_id === index[i]) {
            arr.push(list[j])
          }
        }
      }
    }
  }else {
    if (index<10){
      //index<10 是dt
      for(let i = 0;i<list.length;i++) {
        if (list[i].classify_id > index * 10 && list[i].classify_id < index * 10 + 10) {
          arr.push(list[i])
        }
      }
    }else {
      for(let i = 0;i<list.length;i++) {
        if (list[i].classify_id === index) {
          arr.push(list[i])
        }
      }
    }
  }
  tabArr=[];
  tabArr.push(...arr);
  for (let i=0;i<tabFor.value.length;i++){
    //高亮排他
    tabFor.value[i].isClass=false;
    for (let j=0;j<tabFor.value[i].list.length;j++){
      tabFor.value[i].list[j].isClass=false;
    }
  }
  window.scrollTo(0, 0);//点击 页面返回顶部
  return arr

}
//所有商品排他高亮显示
let allSwitch=(list)=>{
  salesUp.value.className = 'triangle-up';
  salesDown.value.className = 'triangle-down';
  priceUp.value.className = 'triangle-up';
  priceDown.value.className ='triangle-down';
  salesinfo.value = true;
  priceinfo.value = true;
  priceMin.value = null;
  priceMax.value = null;
  i.value=0;
  list=list.sort((a,b)=>{
    return a.id-b.id;
  })
  for (let i=0;i<tabFor.value.length;i++){
    //高亮排他
    tabFor.value[i].isClass=false;
    for (let j=0;j<tabFor.value[i].list.length;j++){
      tabFor.value[i].list[j].isClass=false;
    }
  }
  window.scrollTo(0, 0);//点击 页面返回顶部
  return list
}
</script>

<style scoped>
*{
  margin:0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
/*list-head*/
.sen-container{
  width: 1200px;
  margin: 0 auto;
}
.list-head{
  display:flex;
  justify-content: space-between;
  color: #000;
  padding: 47px 0 55px;
}
.list-name{
  font-size: 22px;
  line-height: 1;
}
.list-nav{
  display:flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-right: 50px;
}
.nav-sel{
  display:flex;
  align-items: center;
  font-size: 16px;
}
.nav-sel p{
  margin-right: 50px;
  cursor: pointer;
  display:flex;
}
.nav-sel p span .triangle-up{
  border-color: transparent transparent #000;
  border-width: 0 5px 5px;
  margin-bottom: 1px;
  margin-top: 5px;
}
.nav-sel p span .triangle-down{
  border-color: #000 transparent transparent;
  border-width: 5px 5px 0;
}
.nav-sel p span i{
  display: block;
  margin-left: 8px;
  border-style: solid;
  height: 0;
  width: 0;
}
.active1{
  border-color: transparent transparent #0096d6!important;
}
.active2{
  border-color: #0096d6 transparent transparent!important;
}

.list-nav .price-search input{
  width: 59px;
  height: 18px;
  border: 1px solid #666;
  color: #666;
  font-size: 12px;
  outline: none;
}
.line{
  margin: 0 8px;
}
.price-btn{
  padding: 3px 8px;
  background: #000;
  margin-left: 18px;
  color: #fff;
  cursor: pointer;
}
/*list-classify*/
.list-classify{
  display:flex;
}
/*分类侧边栏*/
.classify-lf dt{
  cursor: pointer;
}
.classify-lf .color{
  color: #0096d6;
}
.classify-lf{
  width:200px;
}
.classify-lf dl{
  margin-bottom:39px;
  width:80px;
  margin-right:120px;
}
.classify-lf dt{
  color:#000000;
  font-size: 18px;
  font-family: sans-serif;
}
.classify-lf dd{
  color:#999999;
  font-size: 16px;
  font-family: sans-serif;
  cursor: pointer;
  line-height: 1;
  margin-top: 16px;
}
.classify-lf dd:hover{
  color:#000000;
}
/*分类内容*/
.classify-rt .goods-list{
  display: flex;
  flex-wrap: wrap;
}
.classify-rt .goods-list img{
  background: rgb(246,246,246);
}
.classify-rt .goods-list .goods-item{
  margin-bottom: 66px;
  position: relative;
  margin-right: 16px;
  flex:none;
  transition: all .3s;
}
.classify-rt .goods-list .goods-item:hover{
  margin-top:-3px;
  box-shadow: 5px 5px 10px #ccc;
}
.classify-rt .goods-list .goods-item a{
  text-decoration: none!important;
}
.classify-rt .goods-free{
  position: absolute;
  top: 0;
  left: 8px;
  width: 72px;
  height: 24px;
  background: #0096d6;
  border-radius: 0 0 4px 4px;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  color: #fff;
  z-index: 99;
}
/*分类内容-字段*/
.goods-info{
  padding: 14px 10px;
}
.goods-info .title{
  font-size: 16px;
  height: 41px;
  overflow: hidden;
  word-break: break-all;
  margin-bottom: 14px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #000;
}
.goods-info .title .new{
  color: #ff0101;
  font-size: 16px;
  margin-right: 9px;
}
.goods-info .price{
  color: #0096d6;
  font-size: 18px;
  line-height: 1;
}
.goods-info .unit{
  font-size: 14px;
  margin-right: 2px;
}
.goods-info .price-line{
  color: #ccc;
  font-size: 12px;
  text-decoration: line-through;
  margin-left: 4px;
}
.goods-info .sales-volume{
  float: right;
  margin-right:20px;
  margin-top:5px;
  font-size:12px;
  color:#999999;
}

</style>